<template>
   <table class="table table-bordered">
    <tbody>
        <tr class="bg-primary">
                <td>编号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>操作</td>
        </tr>
        <tr align="center"  v-for="(item,index) in arr" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
            <td>{{ item.sex }}</td>
            <td>
                <input type="button" class="btn btn-primary" value="添加">
                <input type="button" class="btn btn-success" value="编辑">
            </td>
        </tr>
    </tbody>
   </table>
   <select>
      <option value="">请选择</option>
      <option value="" v-for="item in city" :key="item.id">{{ item.title }}</option>
    </select>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

let arr=reactive([
    { id: "1", name: "张飞", age: 18, sex: "男" },
    { id: "2", name: "燕飞", age: 20, sex: "女" },
    { id: "3", name: "孔明", age: 35, sex: "男" },
    { id: "4", name: "貂蝉", age: 17, sex: "女" },
    { id: "5", name: "孔融", age: 23, sex: "男" }

])
let city=reactive([
  
    { id: "1", title: "抽烟" },
    { id: "2", title: "喝酒" },
    { id: "3", title: "烫头" },        
])
</script>

<style scoped>

</style>